<script setup>
import { ref, isRef, unref, reactive, toRefs, toRef } from 'vue';

// const name = ref('涛涛')
// const age = { value: 18 }

// isRef 是用来判断是否为响应式数据
// console.log(isRef(age));

// unref 如果参数是 ref，则返回内部值，否则返回参数本身。
// console.log(unref(name));



let obj = reactive({
  name: '涛涛',
  age: 20,
  h: 150,
  sex: '女'
})

// toRefs 解构出来的数据具备响应式
let { name, age, h } = toRefs(obj)

// 对于这种不太确定对象中有还是没有的数据我们不能随便去使用，否则会导致找不到
// toRef 当对象中有我们需要的时候就直接解构使用，如果没有则会自动的创建一个
// 空的 sex 属性，其目的是为了防止使用的时候出现未定义的情况
let sex = toRef(obj, 'sex')

function change () {
  sex.value = '男'
}
</script>

<template>
  <div>
    <h1>{{ name }} -- {{ age }} -- {{ h }} -- {{ sex }}</h1>

    <button @click="change">修改</button>
  </div>
</template>

